<template>
    <a-form ref="formRef" :model="formState" labelAlign='left' :colon='false' :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="20">
            <a-col :span="8">
                <a-form-item label="流程名称" name='processName' :rules="{ required: true, message: '请输入流程名称', trigger: 'blur' }">
                    <a-input class="full-input" v-model:value="formState.processName" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="流程类型" name='processType' :rules="{ required: true, message: '请选择流程类型', trigger: 'blur' }">
                    <a-select class="full-input" v-model:value="formState.processType" placeholder="请选择流程类型">
                        <a-select-option value="2">财务</a-select-option>
                        <a-select-option value="3">财务</a-select-option>
                        <a-select-option value="4">营销</a-select-option>
                        <a-select-option value="5">行政</a-select-option>
                        <a-select-option value="6">成本</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="审批去重">
                    <a-select class="full-input" v-model:value="formState.approvalType" placeholder="请选择是否去重">
                        <a-select-option value="1">不去重</a-select-option>
                        <a-select-option value="2">保留第一个</a-select-option>
                        <a-select-option value="3">保留最后一个</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="超时时间(h)">
                    <a-input v-model:value="formState.processOutTime" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="结构编码">
                    <a-input v-model:value="formState.structure" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="开始回掉API">
                    <a-input v-model:value="formState.startCallBackApi" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="结束回掉API">
                    <a-input v-model:value="formState.endCallBackApi" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="超时处理">
                    <a-radio-group v-model:value="formState.processOutType">
                        <a-radio value="1">不处理</a-radio>
                        <a-radio value="2">标红提示</a-radio>
                        <a-radio value="3">消息提醒</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="流程说明">
                    <a-input type="textarea" v-model:value="formState.processDesc" :autosize="{minRows: 3, maxRows: 6 }"/>
                </a-form-item>
            </a-col>
        </a-row>
        
        <a-form-item class="f-right">
            <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-form-item>
    </a-form>
</template>
<script lang="ts">
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { defineComponent, reactive, toRaw, UnwrapRef, ref, inject,onBeforeMount } from 'vue';
import { apiHandlAdd,apiHandlInfo,apiHandlUpdate } from "../../api/common"
import { useRoute } from "vue-router"
interface FormState {
  processName: string;
  processType: string | undefined | number;
  approvalType: string | undefined | number;
  processOutTime: string | undefined | number;
  structure: string | undefined;
  startCallBackApi: string | undefined | null;
  endCallBackApi: string | undefined | null;
  processOutType: string | undefined | number;
  processDesc: string | undefined;
}
export default defineComponent({
    setup() {
        const route = useRoute();
        let ISPOST:boolean = false
        const $Message:any = inject('$Message');
        const $router:any = inject('$router');
        const formRef = ref();
        let formState: UnwrapRef<FormState> = reactive({
            processName: '',
            processType: '',
            approvalType: '',
            processOutTime: '',
            structure: '',
            startCallBackApi: '',
            endCallBackApi: '',
            processOutType: '',
            processDesc: '',
        });
        //提交
        const onSubmit = () => {
            if (ISPOST) {
                $Message.warning("操作太频繁！")
                return;
            }
            ISPOST = true;
            setTimeout(() => {
                ISPOST = false;
            }, 3000);
            formRef.value
                .validate()
                .then(async() => {
                    const res:any = route.query.key ? await apiHandlUpdate(toRaw(formState)) : await apiHandlAdd(toRaw(formState))
                    if (res.success) {
                        $Message.success(res.message);
                        $router.back(-1)
                    } else {
                        $Message.error(res.message);
                    }
                })
                .catch((error: ValidateErrorEntity<FormState>) => {
                    console.log('error', error);
                });
        };
        //详情
        const getInfo = async() => {
            // formState.processName = 'sdsd'
            const res:any = await apiHandlInfo({
                primaryKey:route.query.key
            })
            formState = reactive(Object.assign({}, res))
            console.log(formState)
            for (var i in formState) {
                console.log(i)
                // console.log(formState[i])
            }
        }
        onBeforeMount(() => {
            if (route.query.key) {
                getInfo()
            }
        })
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            formState,
            onSubmit,
            formRef
        };
    },
});
</script>
<style lang='scss' scoped>
    
</style>